<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <!-- canvas是一个画图标签 -->
    <!-- 宽高要加在标签上面 -->
    <canvas id="canvas" width="500" height="400"></canvas>

    <script>
      const canvas = document.querySelector("#canvas");
      const ctx = canvas.getContext("2d");

      // 画一个矩形
      ctx.fillStyle = "red"; // 设置填充色
      ctx.fillRect(50, 50, 100, 80);

      // 描边矩形
      ctx.strokeStyle = "green";
      ctx.strokeRect(200, 200, 200, 200);

      // 画线段
      ctx.beginPath();
      ctx.moveTo(100, 100);
      ctx.lineTo(200, 100);
      ctx.lineTo(250, 200);
      ctx.closePath();
      // ctx.stroke();
      ctx.fillStyle = "#ccc";
      ctx.fill();

      // 画圆弧
      ctx.beginPath();
      // 弧度，0表示3点钟方向，默认是顺时针
      ctx.arc(250, 180, 100, 0, 2 * Math.PI, true);
      ctx.strokeStyle = "blue";
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      ctx.arc(250, 130, 50, -Math.PI / 2, Math.PI / 2, true);
      ctx.strokeStyle = "blue";
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      ctx.arc(250, 230, 50, -Math.PI / 2, Math.PI / 2, false);
      ctx.strokeStyle = "blue";
      ctx.stroke();
      ctx.closePath();

      // 文本
      ctx.font = "30px Verdana";
      ctx.fillText("abc", 100, 200);

      // 嵌入图片
      let img = new Image();
      img.src = "";
      img.onload = () => {
        ctx.drawImage(img, 100, 100);
      };
    </script>
  </body>
</html>
